<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <title>网络有声小说播放器 - JavaSpringBoot</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- jquery -->
    <script th:src="@{/jquery/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/jquery/jquery-migrate-1.1.1.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" th:href="@{/bootstrap/2.3.1/css_default/bootstrap.min.css}" />
    <script th:src="@{/bootstrap/2.3.1/js/bootstrap.js}"></script>
    <!-- select2 -->
    <link rel="stylesheet" th:href="@{/jquery-select2/3.4/select2.min.css}" />
    <script th:src="@{/jquery-select2/3.4/select2.min.js}"></script>
    <!-- jbox -->
    <link id="skin" rel="stylesheet" th:href="@{/jquery-jbox/2.3/Skins/Default/jbox.css}" />
    <script type="text/javascript" th:src="@{/jquery-jbox/2.3/jquery.jBox-2.3.js}"></script>
    <script type="text/javascript" th:src="@{/jquery-jbox/2.3/i18n/jquery.jBox-zh-CN.js}"></script>
    <!-- data table -->
    <link rel="stylesheet" th:href="@{/jquery-dataTable/jquery.dataTables.min.css}" />
    <script th:src="@{/jquery-dataTable/jquery.dataTables.min.js}"></script>
    <style>
        li {
            list-style-type: none;
            margin: 2px 10px;
            display: inline-block;
        }
        .contentTable{
            width: 95%;
        }
    </style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="95%">
    <tr>
        <td style="width: 50%;">
            <h1 class="page-header">数据查询</h1>
        </td>
        <td style="width: 50%;">
            <h1 class="page-header">在线播放</h1>
        </td>
    </tr>
    <tr>
        <td>
            <div style="height:530px;width:95%;overflow:scroll;">
                <!-- 查询条件 -->
                <form id="searchForm" class="breadcrumb form-search" th:action="${playServiceApiUrl}" method="post">
                    <ul class="ul-form">
                        <li><label>搜索站点	：</label>
                            <select id="websiteType" name="websiteType" class="select2 input-small" required="required" >
                                <option th:each="m : ${websiteTypes}" th:value="${m.name()}" th:text="${m.showDesc}" ></option>
                            </select>
                        </li>
                        <li><label>关键字：</label>
                            <input id="keyword" name="keyword" placeholder="书名，作者等" required="required" class="input-medium" />
                        </li>
                        <li class="btns">
                            <input id="btnSearch" class="btn btn-success"  type="button" value="搜索" onclick="doSearchBooks()" />
                        </li>
                    </ul>
                </form>
                <hr/>
                <!-- 搜索结果展示 -->
                <table id="booksTable" class="contentTable table table-bordered table-condensed table-hover" >
                    <thead>
                    <tr>
                        <th width="15%">序号</th>
                        <th>图书名称</th>
                        <th width="20%">操作</th>
                    </tr>
                    </thead>
                    <tbody id="booksBody">
                    </tbody>
                </table>
                <hr/>
                <button class="btn btn-primary" onclick="doAddPlayList()">添加到播放列表</button>
                <!-- 解析目录展示 -->
                <table id="catalogsTable" class="contentTable table table-bordered table-condensed table-hover" >
                    <thead>
                    <tr>
                        <th width="15%">
                            <input type="checkbox" title="全选" onclick="cataLogSelAll(this)" />&nbsp;&nbsp;序号
                        </th>
                        <th>目录名称</th>
                    </tr>
                    </thead>
                    <tbody id="catalogsBody">
                    </tbody>
                </table>
                <br/>
            </div>
        </td>
        <td>
            <div style="height:530px;width:95%;overflow:scroll;">
                <div id="divBookPlayer">
                    <span id="bookPlayerTitle"></span>
                    <audio id="bookPlayer" autoplay="autoplay" controls="controls" src="" >您的浏览器不支持 audio 标签。</audio>
                </div>
                <hr/>
                <button class="btn btn-primary" onclick="doPlayPrevItem()">播放上一项</button>
                <button class="btn btn-primary" onclick="doPlayNextItem(false)">播放下一项</button>
                <button id="autoNextItem" class="btn btn-success active" onclick="doSettingAutoNext()">自动播放下一项</button>
                <button class="btn btn-danger" onclick="doClearPlayList()">清空播放列表</button>
                <!-- 播放列表展示 -->
                <table id="playsTable" class="contentTable table table-bordered table-condensed table-hover" >
                    <thead>
                    <tr>
                        <th width="15%">序号</th>
                        <th>标题</th>
                        <th width="20%">状态</th>
                        <th width="20%">操作</th>
                    </tr>
                    </thead>
                    <tbody id="playsBody">
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
</table>

<script type="text/javascript">

    var playListMaxId = $(".playListRow").length + 1;
    var playItemIndex = -1;

    $(function () {
        setInterval(function () {
            // 判断是否自动播放下一首
            if ($("#autoNextItem").hasClass("active")) {
                if ($("#bookPlayer")[0].ended) {
                    doPlayNextItem(true);
                }
            }
        }, 1000);
    });

    /**
     * 执行查询
     */
    function doSearchBooks() {
        if ($.trim($("#websiteType").val()).length ==0) {
            $.jBox.error("请选择“搜索站点”");
            return false;
        }
        if ($.trim($("#keyword").val()).length ==0) {
            $.jBox.error("请填写“关键字”");
            return false;
        }
        $("#booksBody").html("");
        $.jBox.tip("数据查询中，请稍候...", 'loading');
        setTimeout(function(){
            $.ajax({
                //接口地址
                url: $("#searchForm").attr("action") + "/search/books",
                data: {"websiteType": $("#websiteType").val(), "keyword": $("#keyword").val()},
                type: 'POST',
                async: true,
                cache: false,
                success: function (rsp) {
                    $.jBox.closeTip();
                    //成功的回调
                    if (rsp.code == 200) {
                        $.each(rsp.data, function (i, v) {
                            var analyzeBtn = "<botton data_url='" + v.url + "' data_type='" + v.websiteType + "' data_title='" + v.title + "' class='analyzeBtn btn' onclick='javascript:doAnalyzeCatalogs(this)' >解析目录</botton>";
                            $("#booksBody").append("<tr><td>" + (i + 1) + "</td><td>" + v.title + "</td><td>" + analyzeBtn + "</td></tr>");
                        });
                    } else {
                        $.jBox.error('查询失败!' + rsp.msg, '提示');
                    }

                },
                error: function (e) {
                    $.jBox.error('查询失败!' + e, '提示');
                }
            });
        },1000);
    }

    /**
     * 执行解析
     */
    function doAnalyzeCatalogs(analyzeBtn) {
        var dataUrl = $(analyzeBtn).attr("data_url");
        var dataType = $(analyzeBtn).attr("data_type");
        var dataTitle = $(analyzeBtn).attr("data_title");
        $("#catalogsBody").html("");
        $.jBox.tip("目录解析中，请稍候...", 'loading');
        setTimeout(function(){
            $.ajax({
                //接口地址
                url: $("#searchForm").attr("action") + "/analyze/catalogs",
                data: {"websiteType": dataType, "url": dataUrl, "title": dataTitle},
                type: 'POST',
                async: true,
                cache: false,
                success: function (rsp) {
                    $.jBox.closeTip();
                    //成功的回调
                    if (rsp.code == 200) {
                        $.each(rsp.data, function (i, v) {
                            $("#catalogsBody").append("<tr><td><input class='chkCatalog' type='checkbox' data_url='" + v.url + "' data_type='" + v.websiteType + "' data_title='" + v.title + "' />&nbsp;&nbsp;" + (i + 1) + "</td><td>" + v.title + "</td></tr>");
                        });
                    } else {
                        $.jBox.error('解析失败!' + rsp.msg, '提示');
                    }
                },
                error: function (e) {
                    $.jBox.error('解析失败!' + e, '提示');
                }
            });
        },1000);
    }

    /**
     * 目录全选
     */
    function cataLogSelAll(cataLogAll) {
        $(".chkCatalog").prop("checked", $(cataLogAll).prop("checked"));
    }

    /**
     * 添加到播放列表
     */
    function doAddPlayList() {
        var chkCatalogAll = $(".chkCatalog:checked");
        if (chkCatalogAll.length == 0) {
            $.jBox.error('至少选择一个目录', '提示');
        }
        $.each($(".chkCatalog:checked"), function (i, v) {
            var dataUrl = $(v).attr("data_url");
            var dataType = $(v).attr("data_type");
            var dataTitle = $(v).attr("data_title");
            $("#playsBody").append("<tr id='playListRow_" + playListMaxId + "' class='playListRow' data_url='" + dataUrl + "' data_type='" + dataType + "' data_title='" + dataTitle + "' ><td>" + playListMaxId + "</td><td>" + dataTitle + "</td><td>-</td><td><botton class='btn btn-success' onclick='doPlayItem(" + playListMaxId + ")'>播放</botton><botton class='btn btn-danger' onclick='doRemovePlayItem(" + playListMaxId + ")'>移除</botton></td></tr>");
            playListMaxId = playListMaxId + 1;
        });
    }

    /**
     * 清空播放列表
     */
    function doClearPlayList() {
        $("#playsBody").html("");
        playListMaxId = 1;
    }

    /**
     * 移除播放项
     */
    function doRemovePlayItem(index) {
        $("#playListRow_" + index).remove();
    }

    /**
     * 播放上一项
     */
    function doPlayPrevItem() {
        var index = playItemIndex - 1;
        while (true) {
            if (index < 1) {
                $.jBox.error('没有上一项', '提示');
                break;
            }
            var row = $("#playListRow_" + index);
            if (!row.html()) {
                index = index - 1;
                continue;
            }
            doPlayItem(index);
            break;
        }
    }

    /**
     * 播放下一项
     */
    function doPlayNextItem(autoNextItem) {
        var index = playItemIndex + 1;
        while (true) {
            if (index > playListMaxId) {
                if (!autoNextItem) {
                    $.jBox.error('没有下一项', '提示');
                }
                break;
            }
            var row = $("#playListRow_" + index);
            if (!row.html()) {
                index = index + 1;
                continue;
            }
            doPlayItem(index);
            break;
        }
    }

    /**
     * 播放选择项
     */
    function doPlayItem(index) {
        var dataUrl = $("#playListRow_" + index).attr("data_url");
        var dataType = $("#playListRow_" + index).attr("data_type");
        var dataTitle = $("#playListRow_" + index).attr("data_title");

        $.jBox.tip("播放解析中，请稍候...", 'loading');
        setTimeout(function(){
            $.ajax({
                //接口地址
                url: $("#searchForm").attr("action") + "/analyze/playUrl",
                data: {"websiteType": dataType, "url": dataUrl, "title": dataTitle},
                type: 'POST',
                async: true,
                cache: false,
                success: function (rsp) {
                    $.jBox.closeTip();
                    //成功的回调
                    if (rsp.code == 200) {
                        // 设置播放器
                        $("#bookPlayer").attr("src", rsp.data.url);
                        $("#bookPlayerTitle").text(rsp.data.title);
                        playItemIndex = index;
                    } else {
                        $.jBox.error('操作失败!' + rsp.msg, '提示');
                    }
                },
                error: function (e) {
                    $.jBox.error('解析失败!' + e, '提示');
                }
            });
        },1000);
    }

    /**
     * 设置自动播放下一项
     */
    function doSettingAutoNext() {
        if ($("#autoNextItem").hasClass("active")) {
            $("#autoNextItem").removeClass("active");
            $("#autoNextItem").removeClass("btn-success");
        } else {
            $("#autoNextItem").addClass("active");
            $("#autoNextItem").addClass("btn-success");
        }
    }

</script>

</body>
</html>